<template>
	<view class="sort">
		<u-sticky offset-top="0" h5-nav-height="0" bg-color="transparent" :enable="false">
			<u-navbar
				title="商品列表"
				:title-bold="true"
				title-color="#000"
				:is-fixed="false"
				:border-bottom="false"
				custom-class="home-bg"
				:background="{ background: 'transparent' }"
				:is-back="false"
			></u-navbar>
		</u-sticky>

		<!-- 	<view class="items">
			<view @click="sort(index)" style="display: flex; flex-direction: column; align-items: center">
				<text :class="[sortIdnex == index ? 'avater' : 'item']">全部</text>
				<view :class="[sortIdnex == index ? 'border-bottom' : '']"></view>
			</view>
			<view v-for="(item, index) in ['全部', '场次一', '场次二', '场次三', '场次四', '场次二', '场次三', '场次四']">
				<view @click="sort(index)" style="display: flex; flex-direction: column; align-items: center">
					<text :class="[sortIdnex == index ? 'avater' : 'item']">{{ item }}</text>
					<view :class="[sortIdnex == index ? 'border-bottom' : '']"></view>
				</view>
			</view>
		</view> -->

		<view class="schedule-container">
			<!-- 使用uTabs组件实现横向滑动的场次列表 -->
			<u-tabs
				:list="sessions"
				:current="currentTab"
				@change="tabChange"
				:is-scroll="true"
				:bar-height="4"
				:active-color="'#f05a39'"
				:inactive-color="'#333'"
				:font-size="24"
				:duration="0.3"
				bg-color="transparent"
				name="roundName"
			/>
		</view>

		<view v-if="loading" class="add-load">
			<u-loading mode="flower"></u-loading>
		</view>

		<view v-else-if="fields.length != 0" class="app-bottom">
			<ProductList :productList="fields" backColor="transparent"></ProductList>
			<loadMore :currentLength="fields.length" :total="total" :pageSize="pageSize" @load-list="getFriendsPage()" ref="loadArray" @load-add="pageNum++"></loadMore>
		</view>
		<u-empty v-else icon-size="400" src="/static/main/image2x.png"></u-empty>
	</view>
</template>

<script>
import ProductList from '@/components/produc-list/index.vue';
import sort from '@/api/sort.js';
import main from '@/api/main.js';
import api from '@/api/index.js';
import loadMore from '@/components/load-more/load-more.vue';
export default {
	components: {
		ProductList,
		loadMore
	},
	data() {
		return {
			sessions: [{ roundName: '全部', id: 0 }],
			currentTab: 0,
			path: api.getPath(),
			pageNum: 1,
			pageSize: 10,
			total: 0,
			sortIdnex: 0,
			fields: [],
			loading: true
		};
	},

	onShow() {
		this.pageNum = 1;
		this.total = 0;
		this.sessions = [{ roundName: '全部', id: 0 }];
		this.getArray();
		this.getApClasslist();
	},
	onReachBottom() {
		if (this.total > this.pageNum * this.pageSize) {
			this.pageNum++;
			this.$refs.loadArray.loadMore();
		}
	},
	onPullDownRefresh() {
		this.pageNum = 1;
		this.currentTab = 0;
		this.sessions = [{ roundName: '全部', id: 0 }];
		// 重新获取数据
		Promise.all([this.getArray(), this.getApClasslist()]).finally(() => {
			// 停止下拉刷新动画
			uni.stopPullDownRefresh();
		});
	},
	methods: {
		async tabChange(e) {
			this.currentTab = e;
			this.pageNum = 1;
			this.fields = [];
			if (e == 0) {
				await this.getArray();
			} else {
				await this.getAxRoundId(this.sessions[e].id);
			}
		},
		async getArray() {
			let _this = this;
			_this.loading = true;
			const res = await main.getGood({
				pageNum: _this.pageNum,
				pageSize: _this.pageSize
			});
			_this.fields = res.rows;
			_this.loading = false;
			_this.total = res.total;
		},
		getFriendsPage() {
			let _this = this;
			main.getGood({
				pageNum: _this.pageNum,
				pageSize: _this.pageSize,
				roundId: this.sortIdnex == 0 ? '' : this.sortIdnex
			})
				.then((res) => {
					_this.fields = [..._this.fields, ...res.rows];
					_this.total = data.total;
				})
				.catch((erro) => {
					console.log(erro);
				});
			return _this.fields.length;
		},
		async getAxRoundId(id) {
			this.loading = true;
			let _this = this;
			const res = await main.getGood({
				pageNum: _this.pageNum,
				pageSize: _this.pageSize,
				roundId: id
			});
			_this.fields = res.rows;
			this.loading = false;
			_this.total = res.total;
		},
		//头部
		getApClasslist() {
			let _this = this;
			sort.getApClasslist()
				.then((res) => {
					_this.sessions.push(...res.rows);
				})
				.catch((erro) => {
					console.log(erro);
				});
		}
	},
	computed: {}
};
</script>

<style lang="scss" scoped>
.schedule-container {
	padding: 0 15px;
}
.app-bottom{
	margin-bottom: 200rpx;
}
/* 自定义tab样式 */
::v-deep .u-tabs__content {
	padding-bottom: 0;
}

::v-deep .u-tabs__nav {
	display: flex;
	align-items: center;
	height: 44px;
}

::v-deep .u-tabs__item {
	padding: 0 16px !important;
	height: 44px;
	line-height: 44px;
	font-size: 28px;
	color: #333;
	border-radius: 22px;
	margin: 0 8px;
	background-color: #f8f8f8;
}

::v-deep .u-tabs__item--active {
	color: #2b85e4 !important;
	font-weight: 500;
	background-color: #e8f4ff;
}

.sort {
	width: 100%;
	height: 100vh;
	background: url('@/static/main/Frame1.png') no-repeat;
	background-size: 100% auto;

	.items {
		display: flex;
		justify-content: space-between;
		margin: 0 45rpx;
		.item {
			font-weight: 400;
			font-size: 28rpx;
			color: #333333;
		}
		.border-bottom {
			width: 30rpx;
			height: 8rpx;
			background: #f05a39;
			border-radius: 50rpx 50rpx 50rpx 50rpx;
		}
		.avater {
			font-weight: 550;
			font-size: 28rpx;
			color: #333333;
		}
	}
}
</style>
